<div id='increment'>
  <span class='val'>{{val1}}</span>
  <button class='action' (click)="increment()">Increment</button>
</div>
<div id='delayedIncrement'>
  <span class='val'>{{val2}}</span>
  <button class='action' (click)="delayedIncrement()">Delayed Increment</button>
  <button class='cancel' *ngIf="timeoutId != null"
    (click)="cancelDelayedIncrement()">Cancel</button>
</div>
<div id='chainedDelayedIncrements'>
  <span class='val'>{{val3}}</span>
  <button class='action'
    (click)="chainedDelayedIncrements(10)">10 Delayed Increments</button>
  <button class='cancel' *ngIf="chainedTimeoutId != null"
    (click)="cancelChainedDelayedIncrements()">Cancel</button>
</div>
<div id='periodicIncrement'>
  <span class='val'>{{val4}}</span>
  <button class='action'
    (click)="periodicIncrement()">Periodic Increment</button>
  <button class='cancel' *ngIf="intervalId != null"
    (click)="cancelPeriodicIncrement()">Cancel</button>
</div>
<div id='periodicIncrement_unzoned'>
  <span class='val'>{{val5}}</span>
  <button class='action'
    (click)="periodicIncrement_unzoned()">Periodic Increment (outside NgZone)</button>
  <button class='cancel' *ngIf="intervalId_unzoned != null"
    (click)="cancelPeriodicIncrement_unzoned()">Cancel</button>
</div>
